<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Course Details - Introduction to Python Programming Fundamentals</title>
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../Homepage/css/style.css">
    <link rel="stylesheet" href="../Homepage/css/header.css">
    <link rel="stylesheet" href="../Homepage/css/carousel.css">
    <link rel="stylesheet" href="../Homepage/css/media.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="../header-footer/common.css">
    <link rel="stylesheet" href="course.css" />
   

</head>
<body>

   <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="../Homepage/courseList.html">course</a></li>
                    <li><a href="../Homepage/league.html">Alliance colleges</a></li>
                    <li><a href="../Homepage/about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>

    <!-- 主体内容 -->
    <main id="courseDetailContainer">
        <!-- 课程详情卡片 -->
        <div class="course-detail-card">
            <img id="courseCover" src="" alt="课程封面" class="course-cover" />
            <div class="course-info">
                <h1 id="courseTitle"></h1>
                <div class="meta">
                    <span class="category" id="courseCategory"></span> |
                    <span class="teacher" id="courseTeacher"></span> |Release time
                    <span class="date" id="courseCreatedAt"></span> |Updated on
                    <span class="date" id="courseUpdatedAt"></span>
                </div>
                <p class="course-intro" id="courseIntro"></p>
                <p class="course-description" id="courseDescription"></p>
                <div class="course-stats">
                    <span>Number of registrations: <strong id="registerCount" class="small-number"></strong></span>
                    <span class="likes" title="收藏数"> 
                        <svg id="starIcon" class="star-icon" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
                            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                        </svg>
                        <strong id="likesCount"></strong>
                    </span>
                </div>
                <div class="course-settings">
                    <p>Comment section: <strong id="enableComments"></strong></p>
                    <!-- 笔记区删除 -->
            </div>
                        <!-- 注册按钮 -->
                <div class="register-btn-container">
                    <button id="registerCourseBtn" class="btn-register">Registered Course</button>
                </div>
            </div>
            
        </div>
        <!-- 课程详情区域 -->
        <div id="courseTabsContainer" class="course-tabs-container">
            <div class="tabs-left">
                <div class="tabs">
                    <button class="tab-btn active" data-tab="intro">Course Introduction</button>
                    <button class="tab-btn" data-tab="plan">Teaching Plan</button>
                    <button class="tab-btn" data-tab="catalog">Table of Contents Chapter</button>
                    <button class="tab-btn" data-tab="assessment">Assessment criteria</button>
                </div>
                <div class="tab-content" id="tab-intro"></div>
                <div class="tab-content" id="tab-plan" style="display:none;"></div>
                <div class="tab-content" id="tab-catalog" style="display:none;"></div>
                <div class="tab-content" id="tab-assessment" style="display:none;"></div>
            </div>

            <aside class="teacher-info">
                <h3>Teaching Professor</h3>
                <p><strong>full name:</strong><span id="teacherName"></span></p>
                <p><strong>Email：</strong><a href="#" id="teacherEmail"></a></p>
            </aside>
        </div>


    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="./about.html">About Us</a></li>
                        <li><a href="./contact.html">Contact Us</a></li>
                        <li><a href="./privacy.html">Privacy Policy</a></li>
                        <li><a href="./terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>
     <!--页眉js-->
    <script>
        //Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                //如果点击退出登录，清除token
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });
            }
            else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>
 <!-- 先加载课程数据 -->
<script src="../Homepage/js/coursesData.js"></script>

<!-- 显式赋值全局变量（可选） -->
<script>
  window.coursesData = coursesData;
</script>

<!-- 再加载业务脚本 -->
<script src="course.js"></script>
<!--
tag
-->
   <script>
    //tag处理
// 获取所有tab按钮和所有tab内容区域
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 1. 移除所有按钮的active类
    tabButtons.forEach(b => b.classList.remove('active'));

    // 2. 隐藏所有tab内容
    tabContents.forEach(content => content.style.display = 'none');
// 3. Add an active class to the currently clicked button
btn.classList.add('active');
// 4. Retrieve the data tab attribute of the current button and display the corresponding content area
const tabName = btn.getAttribute('data-tab');
const activeContent = document.getElementById(`tab-${tabName}`);
if (activeContent) {
activeContent.style.display = 'block';
}
});
});


   </script>

</body>
</html>
